<template>
  <div>
    <div class="shubei">
      <span>查询条件</span>
      <span class="shuyi2">
        <el-button class="rides" @click="loachuan()">导出Excel</el-button>
      </span>
    </div>
    <div>
      <el-row :span="1">
        <el-col :span="3">生产部门</el-col>
        <el-col :span="3">
          <el-select v-model="bumen" placeholder="请选择">
            <el-option
              v-for="item in showpM"
              :key="item.value1"
              :label="item.DeptName"
              :value="item.DeptId"
            ></el-option>
          </el-select>
        </el-col>
        <el-col :span="1">年份</el-col>
        <el-col :span="2">
          <el-select v-model="value1" placeholder="请选择">
            <el-option
              v-for="item in options1"
              :key="item.value1"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-col>
        <el-col :span="1">月份</el-col>
        <el-col :span="3">
          <el-select v-model="value2" placeholder="请选择">
            <el-option
              v-for="item in options2"
              :key="item.value2"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-col>
        <el-col :span="2">
          <button @click="showPu()">查询</button>
        </el-col>
      </el-row>
    </div>
    <div class="shubei">查询结果</div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="DeptName" label="部门名称"></el-table-column>
      <el-table-column prop="SubsidyId" label="序号"></el-table-column>
      <el-table-column prop="StaffName" label="姓名"></el-table-column>
      <el-table-column prop="PMonthlyWages" label="月工资"></el-table-column>
      <el-table-column prop="PLeave" label="请假(h)"></el-table-column>
      <el-table-column prop="PBeLate" label="迟到(次)"></el-table-column>
      <el-table-column prop="POvertime" label="加班(h)"></el-table-column>
      <el-table-column label="系数">
        <template slot-scope="scope">
          <el-input v-model="scope.row.PCoefficient"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="PCalculateMoney" label="计算额"></el-table-column>
      <el-table-column label="调配额">
        <template slot-scope="scope">
          <el-input v-model="scope.row.TheQuota"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="调整状态">
        <template slot-scope="scope">{{ scope.row.PState ? "✓" : "×" }}</template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <button @click="updatepz(scope.row)">保存</button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options1: [
        {
          value: "",
          label: ""
        },
        {
          value: "2018",
          label: "2018"
        },
        {
          value: "2019",
          label: "2019"
        },
        {
          value: "2020",
          label: "2020"
        },
        {
          value: "2021",
          label: "2021"
        }
      ],
      value1: "",

      options2: [
        {
          value: "01",
          label: "1"
        },
        {
          value: "02",
          label: "2"
        },
        {
          value: "03",
          label: "3"
        },
        {
          value: "04",
          label: "4"
        },
        {
          value: "05",
          label: "5"
        },
        {
          value: "06",
          label: "6"
        },
        {
          value: "07",
          label: "7"
        },
        {
          value: "08",
          label: "8"
        },
        {
          value: "09",
          label: "9"
        },
        {
          value: "10",
          label: "10"
        },
        {
          value: "11",
          label: "11"
        },
        {
          value: "12",
          label: "12"
        }
      ],
      value2: "",

      bumen: "",

      tableData: [],

      showpM: [],
      update: {
        SubsidyId: "",
        PzName: "",
        PMonthlyWages: "",
        PLeave: "",
        PBeLate: "",
        POvertime: "",
        PCoefficient: "",
        PCalculateMoney: "",
        TheQuota: "",
        PState: "",
        PDepartment: "",
        PzRank: "",
        PDateTimes: ""
      }
    };
  },
  methods: {
    showPu() {
      this.$myaxios.get("CheckAttendance/showSubsidy").then(res => {
        this.tableData = res.data;
      });
    },
    showpLa() {
      this.$axios.get("CheckAttendance/ShowOPLa").then(res => {
        this.showpM = res.data;
      });
    },
    updatepz(row) {
      (this.update.SubsidyId = row.SubsidyId),
        (this.update.PzName = row.PzName),
        (this.update.PMonthlyWages = row.PMonthlyWages),
        (this.update.PLeave = row.PLeave),
        (this.update.PBeLate = row.PBeLate),
        (this.update.POvertime = row.POvertime),
        (this.update.PCoefficient = row.PCoefficient),
        (this.update.PCalculateMoney = row.PCalculateMoney),
        (this.update.TheQuota = row.TheQuota),
        (this.update.PState = row.PState),
        (this.update.PDepartment = row.PDepartment),
        (this.update.PzRank = row.PzRank),
        (this.update.PDateTimes = row.PDateTimes);
      this.$axios
        .post("CheckAttendance/UpdateSubsidy", this.update)
        .then(res => {
          if (res.data > 0) {
            this.showPu();
          }
        });
    },
    //下载
    loachuan() {
      if (confirm("是否确定下载")) {
        window.open("CheckAttendance/SubsidyExcel");
      }
    }
  },
  created() {
    this.showPu();
    this.showpLa();
  }
};
</script>

<style scoped>
.shubei {
  background-color: #409eff;
}
.rides {
  background-color: red;
  color: aliceblue;
}
.shuyi2 {
  margin-left: 1200px;
}
</style>